<template>
  <transition-group tag="ul">
    <div class="boxLists" v-for="(item, index) in taskNodeInfos" :key="Math.floor(Math.random() * 10000) + index">
      <!-- 第一级普通 -->
      <div class="ordinary" v-if="item.childNode == null || item.childNode.length < 2">
        <div class="list" :class="{ cur: tindex === index }">
          <div class="left">
            <div class="number">{{ index + 1 }}</div>
          </div>
          <!-- <slot name="rigth" :item="item" /> -->
          <div class="right">
            <div class="text">第{{ index + 1 }}级审核</div>
            <slot name="rigth_content" :scoped="item" :index="index"></slot>
          </div>
          <!-- 线 -->
          <div class="buttom_line" v-if="index != taskNodeInfos.length - 1"></div>
          <!-- 修改删除移动操作图标 -->
          <div class="showIcons" v-if="showIcon">
            <!--上移-->
            <div
              v-if="index != 0"
              title="上移"
              class="icon top"
              :class="index == taskNodeInfos.length - 1 ? 'offset_up_icon' : ''"
              @click="up(taskNodeInfos, index)"
            >
              <a-icon type="up" />
            </div>
            <!--下移-->
            <div
              v-if="index != taskNodeInfos.length - 1"
              class="icon down"
              title="下移"
              @click="down(taskNodeInfos, index)"
            >
              <a-icon type="down" />
            </div>
            <!--编辑-->
            <div class="icon check" id="check" ref="check">
              <!-- <a-tooltip :visible="tindex === index? true: false" :arrowPointAtCenter="true" placement="right" trigger="click" overlayClassName="toolip-zj">
                <div slot="title">
                  <tooltipNode ref="ProcessFigure" :order="index" v-model="taskNodeInfos[index]" @getTaskNodeInfos="getTaskNodeInfos"  @closeTooltip="closeTooltip" />
                </div> -->
              <a-icon type="mobile" title="编辑" @click="handleTooltip(index, taskNodeInfos[index])" />
              <!-- </a-tooltip> -->
            </div>
            <!--删除-->
            <div class="icon del" title="删除" @click="delNode(taskNodeInfos, index)">
              <a-icon type="delete" />
            </div>
          </div>
          <!-- 眼睛图标 -->
          <div class="showIcons" v-if="showYey">
            <div class="icon" v-if="item.executeStatus == '0'">
              <!-- 通过 -->
              <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
            <div class="icon" v-if="item.executeStatus == '1'">
              <!-- 拒绝 -->
              <a-icon type="stop" theme="twoTone" twoToneColor="red" />
            </div>
            <div class="icon" v-if="item.executeStatus == '2'">
              <!-- 未查看 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#515151" />
            </div>
            <div class="icon" v-if="item.executeStatus == '3'">
              <!-- 已查看 未审核 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="item.executeStatus == '4'">
              <!-- 其他方式通过 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="item.executeStatus == '5'">
              <!-- 其他方式拒绝 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="item.executeStatus == '6'">
              <!-- 撤回 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
          </div>
        </div>
      </div>
      <div v-else class="willAndOr" v-for="(childItem, count) in item.childNode" :key="count">
        <div class="list">
          <div class="left">
            <div class="number">{{ index + 1 }}</div>
          </div>
          <div class="right">
            <div class="text">第{{ index + 1 }}级审核</div>
            <slot name="rigth_content" :scoped="childItem" :index="index"></slot>
          </div>
          <!-- 线 -->
          <div class="buttom_line" v-if="count != item.childNode.length - 1">
            <span class="or">{{ item.approveType == '02' ? '会' : item.approveType == '03' ? '或' : '' }}</span>
          </div>
          <div class="left_line"></div>
          <div class="chang_line" :class="index == 0 && count == 0 ? 'frist_del_25' : ''">
            <div class="del_50"></div>
          </div>
          <!-- 修改删除移动操作图标 -->
          <div class="showIcons" v-if="showIcon">
            <div class="icon" @click="see(childItem)">
              <a-icon type="mobile" />
            </div>
            <!-- 提示框 -->
            <div class="icon check">
              <a-tooltip placement="right" trigger="click" overlayClassName="toolip-zj">
                <div slot="title">
                  ssss
                  <!-- <tooltipNode ref="ProcessFigure1" v-model="item.childNode[count]"> </tooltipNode> -->
                </div>
                <a-icon type="mobile" />
              </a-tooltip>
            </div>
            <div class="icon del" @click="delNode(item.childNode, count, index, item, childItem)">
              <a-icon type="delete" />
            </div>
          </div>
          <!-- 眼睛图标 -->
          <div class="showIcons" v-if="showYey">
            <div class="icon" v-if="childItem.executeStatus == '0'">
              <!-- 通过 -->
              <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '1'">
              <!-- 拒绝 -->
              <a-icon type="stop" theme="twoTone" twoToneColor="red" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '2'">
              <!-- 未查看 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#515151" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '3'">
              <!-- 已查看 未审核 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '4'">
              <!-- 其他方式通过 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="iscon" v-if="childItem.executeStatus == '5'">
              <!-- 其他方式拒绝 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '6'">
              <!-- 撤回 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition-group>
</template>
<script>
// import tooltipNode from './tooltipNode'

export default {
  name: 'ProcessFigure',
  model: {
    prop: 'taskNodeInfos',
    event: 'change'
  },
  // components: {
  // tooltipNode,
  // },
  props: {
    id: String,
    taskNodeInfos: {
      type: Array,
      required: false
    },
    showIcon: {
      type: Boolean,
      required: false
    },
    showYey: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      tindex: -1,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 }
        }
      }
    }
  },
  created() {},
  computed: {},
  methods: {
    change(data) {
      console.log(data)
      this.$emit('change', data)
    },
    //流程图交互效果
    addNode(count) {
      let newArrNode = {
        approveType: count,
        childNode: [
          { approveType: 1, expireAction: '短信', phaseName: '一级助理审核', taskUser: 'jl1' },
          { approveType: 2, expireAction: '短信', phaseName: '二级助理审核', taskUser: 'jl2' }
        ],
        phaseName: '测试或签跟会签'
      }
      console.log(this)
      this.$refs.addNode.$refs.modal.show()
      // this.taskNodeInfos.push(newArrNode)
    },
    delNode(fatherArr, index, fatherIndex, fatherObj, childItem) {
      //会签或签的时候才会传父对象
      if (fatherObj && fatherArr.length <= 2) {
        //只有2个元素的时候变为一级 把子对象属性加到父对象
        fatherObj.childNode = []
        fatherObj = { ...fatherObj, ...childItem }
        fatherObj.approveType = '01'
        // this.$nextTick(() => {
        //   this.taskNodeInfos[fatherIndex] = fatherObj
        // })
      } else {
        fatherArr.splice && fatherArr.splice(index, 1)
      }
    },
    down(father, index) {
      father[index] = father.splice(index + 1, 1, father[index])[0]
    },
    up(father, index) {
      father[index] = father.splice(index - 1, 1, father[index])[0]
    },
    closeTooltip() {
      this.tindex = -1
    },
    handleTooltip(index, record) {
      console.log('1111111111111111', index, record)
      this.tindex = index
      this.$emit('fatherMethod', index + 1, record)
    },
    getTaskNodeInfos(val, order) {
      if (val && Object.keys(val).length > 0) {
        this.taskNodeInfos[order] = val
      }
      this.closeTooltip()
    }
  },
  watch: {
    taskNodeInfos(val) {
      this.data = JSON.parse(JSON.stringify(val))
      this.data.forEach(item => {
        if (item.childNode == null || item.childNode == undefined) {
          item.childNode = []
        }
      })
    }
  }
}
</script>
<style lang="less">
.toolip-zj {
  z-index: 1000;
  left: 710px !important;
  border-radius: 4px;
  .ant-tooltip-content {
    width: 570px;
    height: 366px;
    background-color: none !important;
    border: none;
    border-radius: 4px;
    background-color: #fff !important;
  }
  .ant-tooltip-inner {
    padding: 0;
    background-color: #fff !important;
    .text_box {
      padding: 2px 16px;
      height: 39px;
      border-bottom: 1px solid rgba(217, 217, 217, 1);
      display: flex;
      align-items: center;
      color: #333;
      margin-bottom: 10px;
    }
  }
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(80px);
}

.v-enter-active,
.v-leave-active {
  transition: all 0.6s ease;
}

.v-move {
  transition: all 0.6s ease;
}

.v-leave-active {
  position: absolute;
}
.ProcessFigure {
  margin: 0;
  padding: 0;
  .list {
    .showIcons {
      position: absolute;
      right: 0;
      top: 0;
    }
    display: flex;
    position: relative;
    margin: 0 0 25px 0;
    align-items: center;
    // width: 40%;
    height: 64px;
    background: inherit;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(232, 232, 232, 1);
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 22px;
    &:hover,
    &.cur {
      border-color: rgba(24, 144, 255, 1);
    }
    .left {
      width: 50px;
      .number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 62px;
        border-radius: 5px;
        background-color: #e8e8e8;
        color: #2e2e6a;
        margin-right: 10px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
      }
    }
    .right {
      padding-left: 8px;
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
      margin-right: 10px;
      justify-content: space-between;
      .rigth_content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .lable {
        display: flex;
      }
    }
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      top: 0;
      right: 0;
      transform: translate(-50%, -50%);
      border: 1px solid gray;
      background-color: #fff;
      .a-icon {
        z-index: 10;
      }
      &.top {
        transform: translate(-425%, -50%);
      }
      &.offset_up_icon {
        transform: translate(-300%, -50%);
      }
      &.down {
        transform: translate(-300%, -50%);
      }
      &.check {
        transform: translate(-175%, -50%);
      }
    }
    .buttom_line {
      position: absolute;
      bottom: -1px;
      transform: translate(0, 100%);
      left: 25px;
      width: 2px;
      height: 25px;
      background-color: #eee;
      .or {
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(50%, 10%);
      }
    }
    .left_line {
      position: absolute;
      left: 0;
      transform: translate(-100%, 100%);
      height: 2px;
      width: 25px;
      background-color: #eee;
    }
    .chang_line {
      position: absolute;
      left: 0;
      transform: translate(-25px, 0);
      height: 115px;
      width: 2px;
      background-color: #eee;
    }
    .frist_del_25 {
      .del_50 {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 58px;
        border: 1px solid #fff;
        transform: translate(0, 0);
      }
    }
  }
}
.boxLists {
  .willAndOr {
    margin-left: 50px;
  }
}
</style>
